<template>
    <van-popup v-model="popup_show" position="bottom" :style="{ 'height': popupHeight }">
            <div class="date-popup-box" v-if="!(dateS.start || dateS.end)">
                <div class="date-row">开始时间:<div class="date-box" @click="dateS.start = true">{{ date_str_format2.start }}
                    </div>
                </div>
                <div class="date-row">结束时间:<div class="date-box" @click="dateS.end = true">{{ date_str_format2.end }}</div>
                </div>
            </div>
            <div class="date-picker" v-if="dateS.start || dateS.end">
                <h3 class="date-select-title">{{ dateS.start ? '开始' : '结束' }}</h3>
                <div class="datetime-picker">
                    <div class="date-text-row">
                        <span>年</span>
                        <span>月</span>
                        <span>日</span>
                        <span>时</span>
                    </div>
                    <div class="datetime-picker-a">
                        <van-datetime-picker :show-toolbar="false" v-model="from.start" type="datehour" title="选择年月日小时"
                            :min-date="date.minDate" :max-date="date.maxDate">
                        </van-datetime-picker>
                    </div>
                </div>
                <div class="btn-row">
                    <van-button type="info" @click="verify_date()">确认</van-button>
                    <van-button type="default" @click="cancel_date()">取消</van-button>
                </div>
            </div>
            <div class="sbumit-row-2" v-else>
                <van-button type="info">确认</van-button>
                <van-button type="default">取消</van-button>
            </div>
        </van-popup>
</template>
<script>
 function format_date(dateObj) {
    return dateObj.getFullYear() + "年" + (dateObj.getMonth() + 1) + "月" + dateObj.getDate() + "日" + dateObj.getHours() + "时" + dateObj.getMinutes() + "分";
}
export default {
    props: {
        Show: {
            type: Boolean,
            default: false
        },
        // start: {
        //     type: Array,
        //     default: {}
        // },
        // end: {
        //     type: Array,
        //     default: {}
        // }
    },
    data() {
        var now_date = new Date();
        var pass_date = new Date();
        pass_date.setDate(now_date.getDate() - 5);
        var [date, from] = [{ "start": pass_date, "end": now_date }, { "start": pass_date, "end": now_date }];
        date['maxDate'] = now_date;
        date['minDate'] = pass_date;
        date['minDate'].setDate(pass_date.getDate() - 100)
        return {
           popup_show: this.$props.Show,
            date,
            from,
            dateS: { "start": false, "end": false }  //日期选中弹出状态
        }
    },
    computed:{
        popupHeight(){
            return (this.dateS.start||this.dateS.end)?'60%':'40%'
        }
    },
    methods:{
        verify_date() {
            this.dateS.start = true;
            this.dateS.end = false;
        },
        date_str_format2() {
            var start = format_date(this.date.start);
            var end = format_date(this.date.end);
            return {
                start, end
            }
        },
    }
}
</script>